<template>
  <!--侧边栏-->
  <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529;">
    <div style="height: 60px;color: white;display: flex;align-items: center;
                justify-content: center;">
      <img src="../assets/logo.png" width="40px" height="40px">
      <span class="logo-title" v-show="!isCollapse" style="margin-left: 10px">迷你商城</span>
    </div>
    <el-menu :collapse="isCollapse" :collapse-transition="false" style="border: none;"
             :default-active="$route.path" background-color="#001529" text-color="rgba(255,255,255,0.65)"
             active-text-color="#fff" @select="handleMenuSelect">
      <el-menu-item index="/userProduct">
        <i class="el-icon-shopping-cart-full"></i>
        <span slot="title">商品页面</span>
      </el-menu-item>
      <el-menu-item index="/userOrder">
        <i class="el-icon-message"></i>
        <span slot="title">我的订单</span>
      </el-menu-item>
      <el-menu-item index="/userSeckill">
        <i class="el-icon-bell"></i>
        <span slot="title">秒杀页面</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: "ClientAsideView",

  props: {
    //默认菜单不收缩
    isCollapse: Boolean,
    //侧边栏宽度
    asideWidth: String,
  },

  methods: {
    //根据菜单选择传递不同的index到父组件
    handleMenuSelect(index) {
      this.$emit('changeComponent', index)
    }
  },
}
</script>

<style>
@import "@/css/global.css";
</style>